{% extends 'adminuser/base_admin.html' %}
{% load static %}

{% block admin_title %}仪表盘{% endblock %}
{% block admin_breadcrumb_title %}仪表盘{% endblock %}
{% block admin_card_title %}仪表盘{% endblock %}

{% block admin_content %}
<!-- 将需要传递给JavaScript的数据放在这里 -->
<script type="application/json" id="chart-data">
{
    "activity_dates": [{% for date in activity_dates %}"{{ date }}"{% if not forloop.last %},{% endif %}{% endfor %}],
    "visit_counts": [{% for count in visit_counts %}{{ count }}{% if not forloop.last %},{% endif %}{% endfor %}],
    "story_counts": [{% for count in story_counts %}{{ count }}{% if not forloop.last %},{% endif %}{% endfor %}],
    "categories": ["奇幻", "科幻", "悬疑", "爱情", "历史", "其他"],
    "category_counts": [28, 35, 22, 40, 15, 10], 
    "quality_labels": ["优秀", "良好", "中等", "一般", "较差"],
    "quality_data": [18, 35, 25, 15, 7],
    "popular_tags": ["冒险", "科技", "魔法", "未来", "爱情", "悬疑", "犯罪", "太空"],
    "tag_counts": [45, 38, 35, 30, 28, 25, 20, 18]
}
</script>

<style>
    .stats-card {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        transition: all 0.3s ease;
        border-left: 4px solid var(--admin-primary);
        background-color: white;
        height: 100%;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    }
    
    .stats-card-body {
        padding: 1.5rem;
        display: flex;
        align-items: center;
    }
    
    .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-right: 1rem;
        color: white;
        flex-shrink: 0;
    }
    
    .stats-icon.users {
        background: linear-gradient(45deg, #2196F3, #64B5F6);
    }
    
    .stats-icon.stories {
        background: linear-gradient(45deg, #1976D2, #42A5F5);
    }
    
    .stats-icon.comments {
        background: linear-gradient(45deg, #0D47A1, #1E88E5);
    }
    
    .stats-icon.reports {
        background: linear-gradient(45deg, #0288D1, #29B6F6);
    }
    
    .stats-content {
        flex-grow: 1;
    }
    
    .stats-value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
        line-height: 1;
        color: #333;
    }
    
    .stats-label {
        color: #616161;
        font-size: 0.9rem;
        margin-bottom: 0;
    }
    
    .change-indicator {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
        border-radius: 50px;
        display: inline-block;
        margin-left: 0.5rem;
    }
    
    .change-indicator.up {
        background-color: rgba(76, 175, 80, 0.1);
        color: #43a047;
    }
    
    .change-indicator.down {
        background-color: rgba(244, 67, 54, 0.1);
        color: #e53935;
    }
    
    .recent-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .recent-item {
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
    }
    
    .recent-item:last-child {
        border-bottom: none;
    }
    
    .recent-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background-color: rgba(33, 150, 243, 0.1);
        color: var(--admin-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }
    
    .chart-container {
        height: 300px;
        position: relative;
    }
    
    .widget-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        color: #424242;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 0.75rem;
    }
    
    .widget-title i {
        margin-right: 0.5rem;
        color: var(--admin-primary);
    }
    
    .badge-custom {
        background-color: var(--admin-accent);
        color: var(--admin-primary-dark);
    }
    
    /* 白色面板 */
    .white-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    
    /* 分隔区域 */
    .section-divider {
        margin: 1.5rem 0;
        border-top: 1px solid #f0f0f0;
        position: relative;
    }
    
    .section-divider::after {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        width: 80px;
        height: 1px;
        background-color: var(--admin-primary);
    }
    
    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #424242;
        margin-bottom: 1.25rem;
        padding-left: 0.5rem;
        border-left: 3px solid var(--admin-primary);
    }
    
    /* 表格美化 */
    .table th {
        color: #616161;
        font-weight: 600;
        border-top: none;
        background-color: #fafafa;
        padding: 0.75rem 1rem;
    }
    
    .table td {
        vertical-align: middle;
        color: #424242;
        border-color: #f5f5f5;
        padding: 0.75rem 1rem;
    }
    
    .table tr:hover {
        background-color: rgba(33, 150, 243, 0.03);
    }
    
    /* 按钮样式 */
    .btn-outline-primary {
        color: var(--admin-primary);
        border-color: var(--admin-primary);
    }
    
    .btn-outline-primary:hover {
        background-color: var(--admin-primary);
        border-color: var(--admin-primary);
        color: white;
    }
    
    /* 多图表布局 */
    .multi-chart-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    .charts-row {
        display: flex;
        gap: 20px;
        width: 100%;
    }
    
    .chart-item {
        background-color: white;
        border-radius: 10px;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        flex: 1;
        min-width: 0; /* 防止内容溢出 */
    }
    
    .chart-container-wrapper {
        height: 180px;
        position: relative;
        width: 100%;
    }
    
    .chart-item-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: #424242;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 0.5rem;
    }
    
    .chart-item-title i {
        color: var(--admin-primary);
        margin-right: 0.5rem;
    }
    
    /* Tag cloud */
    .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 1rem;
    }
    
    .tag-item {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        background-color: var(--admin-accent);
        color: var(--admin-primary-dark);
        font-weight: 500;
        display: flex;
        align-items: center;
    }
    
    .tag-count {
        margin-left: 0.5rem;
        background-color: var(--admin-primary-dark);
        color: white;
        border-radius: 20px;
        padding: 0.1rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Animation */
    .animate-fade-in {
        animation: fadeIn 0.5s ease forwards;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<h4 class="section-title mb-4">系统状态概览</h4>

<div class="row">
    <!-- 状态统计卡片 -->
    <div class="col-md-3 mb-4">
        <div class="stats-card animate-fade-in" style="animation-delay: 0.1s;">
            <div class="stats-card-body">
                <div class="stats-icon users">
                    <i class="bi bi-people-fill"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-value">{{ total_users }}</div>
                    <p class="stats-label">用户总数 <span class="change-indicator up">+{{ new_users_count }} 今日</span></p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-4">
        <div class="stats-card animate-fade-in" style="animation-delay: 0.2s;">
            <div class="stats-card-body">
                <div class="stats-icon stories">
                    <i class="bi bi-book-fill"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-value">{{ total_stories }}</div>
                    <p class="stats-label">故事总数 <span class="change-indicator up">+{{ new_stories_count }} 今日</span></p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-4">
        <div class="stats-card animate-fade-in" style="animation-delay: 0.3s;">
            <div class="stats-card-body">
                <div class="stats-icon comments">
                    <i class="bi bi-chat-dots-fill"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-value">{{ total_comments }}</div>
                    <p class="stats-label">评论总数 
                        {% if pending_comments %}
                        <span class="badge badge-custom">{{ pending_comments }} 待审核</span>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-4">
        <div class="stats-card animate-fade-in" style="animation-delay: 0.4s;">
            <div class="stats-card-body">
                <div class="stats-icon reports">
                    <i class="bi bi-flag-fill"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-value">{{ total_reports }}</div>
                    <p class="stats-label">举报总数
                        {% if pending_reports %}
                        <span class="badge badge-custom">{{ pending_reports }} 未处理</span>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section-divider"></div>
<h4 class="section-title">内容分析概览</h4>

<div class="row">
    <!-- 内容分析概览 -->
    <div class="col-md-8 mb-4">
        <div class="card white-card h-100 animate-fade-in" style="animation-delay: 0.5s;">
            <div class="card-body">
                <h5 class="widget-title"><i class="bi bi-clipboard-data"></i> 内容分析概览</h5>
                
                <div class="multi-chart-container">
                    <div class="charts-row">
                        <!-- 内容分类分布 -->
                        <div class="chart-item">
                            <h6 class="chart-item-title"><i class="bi bi-pie-chart"></i> 内容分类分布</h6>
                            <div class="chart-container-wrapper">
                                <canvas id="categoryChart"></canvas>
                            </div>
                        </div>
                        
                        <!-- 内容质量分布 -->
                        <div class="chart-item">
                            <h6 class="chart-item-title"><i class="bi bi-bar-chart"></i> 内容质量分布</h6>
                            <div class="chart-container-wrapper">
                                <canvas id="qualityChart"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 热门标签 -->
                    <div class="chart-item">
                        <h6 class="chart-item-title"><i class="bi bi-tags"></i> 热门标签</h6>
                        <div class="tag-cloud">
                            <div class="tag-item">冒险 <span class="tag-count">45</span></div>
                            <div class="tag-item">科技 <span class="tag-count">38</span></div>
                            <div class="tag-item">魔法 <span class="tag-count">35</span></div>
                            <div class="tag-item">未来 <span class="tag-count">30</span></div>
                            <div class="tag-item">爱情 <span class="tag-count">28</span></div>
                            <div class="tag-item">悬疑 <span class="tag-count">25</span></div>
                            <div class="tag-item">犯罪 <span class="tag-count">20</span></div>
                            <div class="tag-item">太空 <span class="tag-count">18</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 最近活动 -->
    <div class="col-md-4 mb-4">
        <div class="card white-card h-100 animate-fade-in" style="animation-delay: 0.6s;">
            <div class="card-body">
                <h5 class="widget-title"><i class="bi bi-person-plus"></i> 最新注册用户</h5>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>用户</th>
                                <th>注册时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in latest_users %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{% if user.profile.avatar %}{{ user.profile.avatar.url }}{% else %}{% static 'admin/img/tx.png' %}{% endif %}" width="32" height="32" class="rounded-circle me-2">
                                        {{ user.username }}
                                    </div>
                                </td>
                                <td>{{ user.date_joined|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'adminuser:user_detail' user_id=user.id %}" class="btn btn-sm btn-outline-primary">查看</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">暂无新用户</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section-divider"></div>
<h4 class="section-title">最新数据</h4>

<div class="row">
    <!-- 最新用户 -->
    <div class="col-md-6 mb-4">
        <div class="card white-card h-100 animate-fade-in" style="animation-delay: 0.7s;">
            <div class="card-body">
                <h5 class="widget-title"><i class="bi bi-person-plus"></i> 最新注册用户</h5>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>用户</th>
                                <th>注册时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in latest_users %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{% if user.profile.avatar %}{{ user.profile.avatar.url }}{% else %}{% static 'admin/img/tx.png' %}{% endif %}" width="32" height="32" class="rounded-circle me-2">
                                        {{ user.username }}
                                    </div>
                                </td>
                                <td>{{ user.date_joined|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'adminuser:user_detail' user_id=user.id %}" class="btn btn-sm btn-outline-primary">查看</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">暂无新用户</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 最新故事 -->
    <div class="col-md-6 mb-4">
        <div class="card white-card h-100 animate-fade-in" style="animation-delay: 0.8s;">
            <div class="card-body">
                <h5 class="widget-title"><i class="bi bi-book"></i> 最新发布故事</h5>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>标题</th>
                                <th>作者</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for story in latest_stories %}
                            <tr>
                                <td>{{ story.title|truncatechars:20 }}</td>
                                <td>{{ story.author.username }}</td>
                                <td>{{ story.created_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'story:detail' pk=story.id %}" target="_blank" class="btn btn-sm btn-outline-primary">查看</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">暂无新故事</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 从JSON获取数据，避免模板语法在JavaScript中导致问题
        const chartDataElement = document.getElementById('chart-data');
        const chartData = JSON.parse(chartDataElement.textContent);
        
        // 内容分类分布图
        var categoryCtx = document.getElementById('categoryChart').getContext('2d');
        var categoryChart = new Chart(categoryCtx, {
            type: 'pie',
            data: {
                labels: chartData.categories,
                datasets: [{
                    data: chartData.category_counts,
                    backgroundColor: [
                        '#2196F3', '#42A5F5', '#64B5F6',
                        '#90CAF9', '#BBDEFB', '#E3F2FD'
                    ],
                    borderColor: 'white',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            boxWidth: 12,
                            padding: 10,
                            font: {
                                size: 11
                            }
                        }
                    }
                }
            }
        });
        
        // 内容质量分布图
        var qualityCtx = document.getElementById('qualityChart').getContext('2d');
        var qualityChart = new Chart(qualityCtx, {
            type: 'bar',
            data: {
                labels: chartData.quality_labels,
                datasets: [{
                    label: '内容数量',
                    data: chartData.quality_data,
                    backgroundColor: '#2196F3',
                    borderColor: '#1976D2',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            precision: 0,
                            font: {
                                size: 10
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    });
</script>
{% endblock %} 